<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <t-btn color="indigo">
        Hover
        <t-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>top</em> (<t-icon
            name="keyboard_arrow_up"
          />)
        </t-tooltip>
      </t-btn>

      <t-btn color="red">
        Over
        <t-tooltip anchor="center right" self="center left" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>right</em> (<t-icon
            name="keyboard_arrow_right"
          />)
        </t-tooltip>
      </t-btn>

      <t-btn color="purple">
        These
        <t-tooltip anchor="center left" self="center right" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>left</em> (<t-icon
            name="keyboard_arrow_left"
          />)
        </t-tooltip>
      </t-btn>

      <t-btn color="amber">
        Buttons
        <t-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>bottom</em> (<t-icon
            name="keyboard_arrow_down"
          />)
        </t-tooltip>
      </t-btn>
    </div>
  </div>
</template>
